<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>自定义菜单修改</title>
    <link rel="stylesheet" href="${base}/res/manage/css/common.css">
    <link rel="stylesheet" href="${base}/res/manage/css/ec.css">
    <link rel="stylesheet" href="${base}/res/manage/css/list.css">
    <link rel="stylesheet" type="text/css" href="${base}/res/plugin/magicThumb/magicthumb.css"/>
</head>
<body>
<form id="inputForm" action="update.jhtml" method="post">
    <input type="hidden" name="id" value="${wxMenu.id}"/>
    <div class="tab set arr">
        <h3><a href="edit.jhtml?id=${wxMenu.id}">修改自定义菜单</a></h3>
        <div class="tablist message">
            <table cellpadding="0" cellspacing="0" style="table-layout:fixed;">
                <tr>
                    <td><label>菜单名称<span class="cred">*</span></label></td>
                    <td>
                        <input type="text" maxlength="32" name="name" placeholder="菜单名称(不超过32个字符长度)"
                               value="${wxMenu.name}"/>
                    </td>
                    <td><label>上级菜单</label></td>
                    <td>
                        <input type="text" class="display"/>
                        <select name="parentId">
                            <option value="">--请选择--</option>
                        [#list plist as pwxmenu]
                            <option value="${pwxmenu.id}"[#if pwxmenu.id == wxMenu.parentId]
                                    selected[/#if]>${pwxmenu.name}</option>
                        [/#list]
                        </select>
                        <a href="javascript:;" class="arrows">∨</a>
                    </td>
                </tr>
                <tr>
                    <td><label>菜单顺序</label></td>
                    <td>
                        <input type="text" name="orders" maxlength="4" placeholder="请填写整数，可为空"
                               value="${wxMenu.orders}"/>
                    </td>
                    <td><label>是否可用</label></td>
                    <td>
                    [@stdCode all=false codeType="IS_ENABLED"]
                        [#list codeMap.entrySet() as entry]
                            <label><input type="radio" name="isEnabled" class="sex" value="${entry.key}"
                                          [#if entry.key == wxMenu.isEnabled?string("1","0")]checked[/#if]>${entry.value}
                            </label>

                        [/#list]
                    [/@stdCode]
                    </td>
                </tr>
                <tr>
                    <td><label>操作类型<span class="cred"> * </span></label></td>
                    <td colspan="3">
                    [@stdCode all=false codeType="WXMENU_TYPE"]
                        [#list codeMap.entrySet() as entry]
                            <label><input type="radio" name="type" class="sex"
                                          value="${entry.key}"[#if entry.key == wxMenu.type]
                                          checked[/#if]>${entry.value}</label>
                        [/#list]
                    [/@stdCode]
                    </td>
                </tr>
                <tr[#if wxMenu.type != "click"] class="display"[/#if] id="msgTypeTr">
                    <td><label>消息类型</label></td>
                    <td colspan="3">
                    [@stdCode all=false codeType="WXMENU_MSGTYPE"]
                        [#list codeMap.entrySet() as entry]
                            <label><input type="radio" name="msgType" class="sex"
                                          value="${entry.key}"[#if entry.key == wxMenu.msgType]
                                          checked[/#if]>${entry.value}</label>
                        [/#list]
                    [/@stdCode]
                    </td>
                </tr>
                <tr[#if wxMenu.msgType != "imgText"] class="display"[/#if] name="imageTr">
                    <td><label>图文内容</label></td>
                    <td colspan="3"><input value="添加" type="button" id="image"
                                           onclick="showLWin('图文内容','${base}/intfc/wxArticle/listContent.jhtml','800px','580px')"
                                           class="red"/></td>
                </tr>
                <tr[#if wxMenu.msgType != "imgText"] class="display"[/#if] id="imageTr" name="imageTr">
                    <td></td>
                    <td colspan="3" class="tab tabwidth">
                        <table id="imageTable" cellpadding="0" cellspacing="0">
                            <tr class="th">
                                <td>图片</td>
                                <td>图文名称</td>
                                <td class="icon">操作</td>
                            </tr>
                        [#list articles as article]
                            <tr>
                                <td>
                                    <input name="imageIds" type="hidden" value="${article.articleId}"/>
                                    <a href="${article.articleImg}" class="MagicThumb">
                                        <img src="${article.articleImg}" class="tdimg img">
                                    </a>
                                </td>
                                <td>
                                    ${article.articleName}
                                </td>
                                <td class="icon">
                                    <a href="javascript:;" val="${article.articleId}" class="delete"></a>
                                </td>
                            </tr>
                        [/#list]
                        </table>
                    </td>
                </tr>
                <tr id="contentTr"[#if wxMenu.msgType == "imgText"] class="display"[/#if] >
                    <td><label>链接/回复内容:<span class="cred">*</span></label></td>
                    <td>
                        <textarea placeholder="链接/回复内容" name="content" id="content">${wxMenu.content}</textarea>
                    </td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
            <p class="save">
                <input type="submit" value="保存" class="red">
            </p>
        </div>
    </div>
</form>
</body>
<script type="text/javascript" src="${base}/res/plugin/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${base}/res/plugin/validator/jquery.validate.min.js"></script>
<script type="text/javascript" src="${base}/res/admin/js/common.js"></script>
<script type="text/javascript" src="${base}/res/plugin/magicThumb/magicthumb.js"></script>
<script type="text/javascript" src="${base}/res/plugin/layer/layer.js"></script>
<script type="text/javascript" src="${base}/res/util/utils.js"></script>
<script type="text/javascript" src="${base}/res/plugin/laytpl/laytpl.js"></script>
<script type="text/html" id="tpl">
    <tr>
        <td>
            <input name="imageIds" type="hidden" value="{{d.id}}"/>
            <a href="{{d.image}}" class="MagicThumb">
                <img src="{{d.image}}" class="tdimg img">
            </a>
        </td>
        <td>
            {{d.name}}
        </td>
        <td class="icon">
            <a href="javascript:;" val="{{d.id}}" class="delete"></a>
        </td>
    </tr>
</script>
<script type="text/javascript">
    $(function () {
        $("#inputForm").validate({
            rules: {
                name: {
                    required: true
                },
                orders: {
                    digits: true
                },
                type: {
                    required: true
                }
            },
            messages: {
                type: {
                    required: "请选择消息类型"
                }
            },
            submitHandler: function (form) {
                var type = $("input[name='type']:checked");
                var msgType = $("input[name='msgType']:checked");
                var typeVal = msgType.val();
                var trLen = $("#imageTable").find("tr").length;
                if (typeVal == "imgText" && trLen < 2) {
                    $.message("error", "请添加图文消息");
                    return false;
                }


                if (type.val() == "view" || (type.val() == "click" && typeVal == "text")) {
                    if ($("#content").val() == "") {
                        $.message("error", "请添加消息内容");
                        return false;
                    }
                    if ($("#content").val().length > 200) {
                        $.message("error", "消息内容过长");
                        return false;
                    }
                }

                $(form).find(":submit").prop("disabled", true);
                form.submit();
            }
        });

        var flag = false;

        $("input[name='type']").click(function () {

            var $this = $(this);
            if ($this.val() == "click") {
                $("#msgTypeTr").show();
                if (flag) {
                    $("#contentTr").hide();
                    $("#content").prop("disabled", true);
                    $("tr[name='imageTr']").show();
                    $("input[name='imageIds']").prop("disabled", false);
                } else {
                    $("#contentTr").show();
                    $("#content").prop("disabled", false);
                    $("tr[name='imageTr']").hide();
                    $("input[name='imageIds']").prop("disabled", true);
                }
            } else {
                $("#msgTypeTr").hide();
                $("tr[name='imageTr']").hide();
                $("input[name='imageIds']").prop("disabled", true);
                $("#contentTr").show();
                $("#content").prop("disabled", false);
            }


        });
        $("input[name='msgType']").click(function () {
            var $this = $(this);
            if ($this.val() == "text") {
                flag = false;
                $("#contentTr").show();
                $("#content").prop("disabled", false);
                $("tr[name='imageTr']").hide();
                $("input[name='imageIds']").prop("disabled", true);
            } else {
                flag = true;
                $("#contentTr").hide();
                $("#content").prop("disabled", true);
                $("tr[name='imageTr']").show();
                $("input[name='imageIds']").prop("disabled", false);
            }
        });

        $(document).delegate("a[val]", "click", function () {
            if (confirm('确定要删除么?')) {
                var _this = $(this);
                _this.closest("tr").remove();
            }
        });
    });

    function build(arr) {
        var _imageTr = $("#imageTable");
        $(arr).each(function () {
            var _this = this;
            var existArticle = $("input[name='imageIds']");
            if (existArticle && existArticle.length >= 10) {
                alert("最多只能添加10条图文消息!");
                return false;
            }
            if ($("input[name='imageIds'][value='" + com.project.common.web.utils.id + "']")[0]) {
                return true;
            }
            laytpl($("#tpl").html()).render(_this, function (html) {
                _imageTr.append(html);
            });
        });
        MagicThumb.start();
    }
</script>
</html>